<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>装维</title>
    <link type="text/css" rel="stylesheet" href="../static/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="../static/css/style.css">
    <style>
        .addLayLine {
            border-bottom: 1px solid #f0f0f0;
        }

        .addLayLine input,
        .addLayLine select {
            border: none;
            outline: none;
        }

        /*去掉地图上高德的logo和版本号*/
        .amap-logo,
        .amap-copyright {
            opacity: 0;
            display: none;
            pointer-events: none;
        }

        .amap-sug-result {
            z-index: 99999999;
        }

        #mapWrap {
            z-index: 99999999;
            position: fixed;
            background-color: #ffffff;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            display: none;
        }

        #mapContent {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #mapDiv {
            color: #CCCCCC;
        }

        #mapTipInput {
            position: absolute;
            left: 10px;
            top: 15px;
            padding: 0 .6rem;
            width: 11rem;
            height: 2.5rem;
            font-size: .875rem;
            box-sizing: border-box;
        }

        #address {
            min-height: 2rem;
            box-sizing: border-box;
            padding: 1rem;
            font-size: .925rem;
        }

        .mapButton {
            margin: 0 1rem .6rem 0;
            width: 3rem;
            height: 2rem;
            font-size: .925rem;
        }

        .lat,
        .lng {
            position: absolute;
            left: 1rem;
            font-size: .925rem;
        }

        .lat {
            bottom: 2rem;
        }

        .lng {
            bottom: .6rem;
        }
    </style>
</head>
<body class="uf uf-ver">
<div class="_titleTxt">
    <a class="backHead" href="javascript:goWinBack();"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
    装维
</div>
<div id="container" class="listDiv uf-f" style="padding: 1rem">

    <div class="uf uf-ac addLayLine">设备编号：
        <input id="iCode" class="uf-f" type="text"/>
        <div class="iconF">&nbsp;<i class="fa fa-qrcode" aria-hidden="true"></i></div>
    </div>

    <div class="uf uf-ac addLayLine">设备分组：
        <select id="iGroup" class="uf-f">
            <option value="">请选择</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div>

    <div class="uf uf-ac addLayLine">装机地址：
        <input onclick="openMap();" id="addressShow" class="uf-f" type="text" readonly/>
        <div onclick="openMap();" class="iconF">&nbsp;<i class="fa fa-map-marker" aria-hidden="true"></i></div>
    </div>

    <div class="uf uf-pc" style="margin-top: 1rem;">
        <button onclick="submitInstall();" class="scrBtn">提交</button>
    </div>
</div>
<div id="mapWrap">
    <div id="mapContent" class="uf uf-ver">
        <div class="uf-f uf uf-ac uf-pc" id="mapDiv">地图加载中...</div>
        <div id="address"></div>
        <input id="mapTipInput" type="text" placeholder="请输入关键字进行搜索">
        <div class="lat">纬度：<span id="lat"></span></div>
        <div class="lng">经度：<span id="lng"></span></div>
        <div class="uf uf-pe">
            <button class="mapButton" onclick="addressOk();">确定</button>
            <button class="mapButton" onclick="closeMap();">取消</button>
        </div>
    </div>
</div>
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="../static/js/jqToast.js"></script>
<script type="text/javascript" src="../static/js/tool.js"></script>
<script type="text/javascript"
        src="//webapi.amap.com/maps?v=1.4.4&key=d09ab504ad2e0432b952109318e79dd2&plugin=AMap.Autocomplete,AMap.ToolBar&callback=mapInit"></script>
<script type="text/javascript" src="//webapi.amap.com/ui/1.0/main-async.js"></script>
<script>
    var $mapWrap = $('#mapWrap');

    function openMap() {
        if (!positionPicker) {
            // jqOpenToast('地图组件还未准备好，请稍等或刷新页面再尝试');
            mapInit();
            return;
        }
        var lat = $("#addressShow").attr('lat');
        var lng = $("#addressShow").attr('lng');
        if (lat && lng) {
            positionPicker.start(new AMap.LngLat(lng, lat));
        }
        $mapWrap.show();
    }

    function closeMap() {
        $mapWrap.hide();
    }

    function addressOk() {
        var address = $("#address").html();
        var lat = $("#lat").html();
        var lng = $("#lng").html();
        if (address) {
            $("#addressShow").val(address);
            $("#addressShow").attr('lat', lat);
            $("#addressShow").attr('lng', lng);
            closeMap();
        } else {
            jqOpenToast('请选择地址');
        }
    }

    //初始化地图
    var positionPicker = false;
    window.mapInit = function () {
        var mapLoading = layer.open({type: 2, shadeClose: false});
        initAMapUI(); //这里调用initAMapUI初始化

        var map = new AMap.Map('mapDiv', {
            zoom: 16,//初始缩放级别
        });
        // var city = '中国';
        // map.setCity(city); //设置城市

        var toolBar = new AMap.ToolBar({ //工具条
            liteStyle: true,//是否使用精简模式
            locate: true,//是否显示定位按钮
            autoPosition: false//是否自动定位
        });
        map.addControl(toolBar);

        AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker) {
            layer.close(mapLoading);

            // map.setLimitBounds(map.getBounds());//限制地图拖动范围

            positionPicker = new PositionPicker({
                mode: 'dragMap', //设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
                map: map //依赖地图对象
            });

            positionPicker.on('success', function (positionResult) {
                // console.log(positionResult);
                var address = positionResult.address;
                var lat = positionResult.position.lat;
                var lng = positionResult.position.lng;

                // 计算距离
                // var A = positionResult.position;
                // var B = {"P":32.041544,"O":118.76741300000003,"lng":118.767413,"lat":32.041544};
                // var distance = A.distance(B);
                // console.log(distance);

                // if (address.indexOf(city) == -1) {
                //     layer.msg('所选位置超出限制范围（' + city + '）', {icon: 0});
                //     address = '';
                //     lat = '';
                //     lng = '';
                // }
                document.getElementById('address').innerHTML = address;
                document.getElementById('lat').innerHTML = lat;
                document.getElementById('lng').innerHTML = lng;
            });
            positionPicker.on('fail', function (positionResult) {
                // 海上或海外无法获得地址信息
                jqOpenToast('海上或海外无法获得地址信息');
                document.getElementById('address').innerHTML = '';
                document.getElementById('lat').innerHTML = '';
                document.getElementById('lng').innerHTML = '';
            });

            var lat = $("#addressShow").attr('lat');
            var lng = $("#addressShow").attr('lng');
            if (lat && lng) {
                positionPicker.start(new AMap.LngLat(lng, lat));
            } else {
                positionPicker.start();
            }

            var auto = new AMap.Autocomplete({
                input: "mapTipInput"
            });
            //注册监听，当选中某条记录时会触发
            AMap.event.addListener(auto, "select", function (e) {
                if (e.poi && e.poi.location) {
                    map.setZoomAndCenter(15, e.poi.location);
                } else {
                    layer.msg('请选择更详细的位置', {icon: 0});
                }
            });
            //重置地图
            // AMap.event.addDomListener(document.getElementById('mapReset'), 'click', function () {
            //     map.setCity(city); //设置城市
            // });

        });
    };

    function submitInstall() {
        var code = $("#iCode").val();
        var group = $("#iGroup").val();
        var address = $("#addressShow").val(),
            lat = $("#addressShow").attr('lat'),
            lng = $("#addressShow").attr('lng');
        if (!code) {
            jqOpenToast('请输入设备编号');
            return;
        }
        if (!group) {
            jqOpenToast('请选择设备组');
            return;
        }
        if (!address) {
            jqOpenToast('请选择地址');
            return;
        }

        console.log(code, group, address, lat, lng);
    }

</script>
</body>
</html>